<template>
    <div class="details">
        <van-nav-bar title="消息详情" left-text="" left-arrow @click-left="onClickLeft" :fixed="true" :placeholder="true" />
        <div class="content">
            <div class="title">{{ detailsData.title }}</div>
            <div class="time">{{ detailsData.createtime }}</div>
            <div class="mainInfo">
                {{ detailsData.info }}
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { messageDetails } from "@/services";
import { onMounted } from 'vue';
import { reactive } from 'vue';
const router = useRouter();
const route = useRoute()
// console.log(route.query)
const detailsData = reactive({
    info: '',
    title: '',
    createtime: ''
})
// 返回按钮
const onClickLeft = () => {
    router.back();
};
const details = async () => {
    let res = await messageDetails({ id: route.query.id })
    detailsData.info = res.data.info
    detailsData.title = res.data.title
    detailsData.createtime = res.data.createtime
}
onMounted(() => {
    details()
})
</script>
<style lang="scss" scoped>
.details {
    .content {
        padding: 20px;
        color: #BABABA;
        font-family: PingFang SC;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        .time {
            font-size: 12px;
            padding-bottom: 10px;
            margin: 10px 0 15px 0;
            border-bottom: 1px solid rgba(217, 217, 217, 0.60);
        }

        .title {
            color: #222;
            text-align: left;
            font-family: PingFang SC;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

        .mainInfo {
            color: #555;
            font-family: PingFang HK;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            text-align: justify;
            // text-align-last: justify;
            /*兼容ie*/
            text-justify: distribute-all-lines;
        }
    }
}
</style>